<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>省市县三级联动案例</title>
	<link rel="stylesheet" href="./css/index.css" />
</head>

<body>
	<div class="list-box">
		<div class="item">
			<span>省份：</span>
			<select id="province">
				<option value="">请选择省份</option>
			</select>
		</div>
		<div class="item">
			<span>城市：</span>
			<select id="city">
				<option value="">请选择城市</option>
			</select>
		</div>
		<div class="item">
			<span>区县：</span>
			<select id="county">
				<option value="">请选择区县</option>
			</select>
		</div>
	</div>
</body>
<script src="/axios.js"></script>
<script src="./lib/jquery.js"></script>
<!-- <script src="./js/index.js"></script> -->
<script>

	axios.defaults.baseURL='http://124.223.14.236:3001/api'

	init()
async	function init(){
const {data:{data}} = await axios({
	url:'/city/province',
	method:'GET',
})
// console.log(data);
const shen = data.map((ele)=>`
<option value="${ele.province}">${ele.name}</option>`
).join('')
document.querySelector('#province').innerHTML='<option value="">请选择省份</option>'+shen
$('#province').val('34')

const {data:{data:fordata}} =await axios({
	url:'/city/city',
	method:'GET',
	params:{
    provinceCode:'34'
	}
})

const shi = fordata.map((ele)=>`
<option value="${ele.city}">${ele.name}</option>
`).join('')
document.querySelector('#city').innerHTML='<option value="">请选择城市</option>'+ shi
$('#city').val('01')

const {data:{data:putdata}} =await axios({
	url:'/city/area',
	method:'GET',
	params:{
		provinceCode:'34',
		cityCode:'01'
	}
})
const qu = putdata.map((ele)=>`
<option value="${ele.area}">${ele.name}</option>
`).join('')
document.querySelector('#county').innerHTML='<option value="">请选择区县</option>'+ qu
$('#county').val('02')
}


// fun(province,'/city/city','GET',{ provinceCode:$('#province').val()},city,'城市')


document.querySelector('#province').addEventListener('change', async function(){
	console.log(this.value)
	const {data:{data:resa}}= await axios({
		url:'/city/city',
		method:'GET',
		params:{
			provinceCode:this.value
		}
	})
	const cheng  =resa.map((ele)=>`
	<option value="${ele.city}">${ele.name}</option>
	`).join('')
	document.querySelector('#city').innerHTML='<option value="">请选择城市</option>'+cheng
   $('#county').html('<option value="">请选择区县</option>')
 
})


document.querySelector('#city').addEventListener('change', async function(){
	console.log(this.value)
	const {data:{data:resb}}= await axios({
		url:'/city/area ',
		method:'GET',
		params:{
			provinceCode:$('#province').val(),
			cityCode:this.value
		}
	})
	const xian  =resb.map((ele)=>`
	<option value="${ele.area}">${ele.name}</option>
	`).join('')
	document.querySelector('#county').innerHTML='<option value="">请选择城市</option>'+xian
  
})











// function fun(province,url,get,data,pot,html){
// 	$(`#${province}`).on('change',async function(){
// 		console.log(this.val())
// 		const {data:{data:ever}} = await axios({
//     url:url,
// 		method:get,
// 		params:data,
// 		})
//   const fordata= ever.map((ele)=>`
// 	<option value="${`ele.${pot}`}">${ele.name}</option>
// 	`).join('')
// 	document.querySelector(`#${province}`).innerHTML=`<option value="">请选择${html}</option>`+ fordata
// 	})
// }






















</script>
</html>